<template>
  <van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
    <van-list
      v-model="loading"
      :finished="finished"
      :offset="10"
      @load="onLoadMore"
    >
      <van-cell
        v-for="item in list"
        :key="item.id"
        class="attention-cell"
      >
        <template #icon>
          <img :src="item.photo" alt="" class="avatar"/>
        </template>
        <template #title>
          <div class="name">{{ item.name }}</div>
          <div class="fans-count">粉丝数：{{ item.fans_count }}人</div>
        </template>
        <template #value>
          <button v-if="item.mutual_follow" class="gy" @click="cancelAttention(item.id)">取消关注</button>
          <button v-else class="ungy" @click="attention(item.id)">关注</button>
        </template>
      </van-cell>
      <van-empty v-if="list.length === 0" description="暂无数据"/>
      <van-cell v-else-if="finished" title="已加载完所有数据" is-link/>
    </van-list>
  </van-pull-refresh>
</template>

<script setup lang="ts">
import {type Ref, ref} from 'vue';
import {axiosRequest} from "@/utils/axiosRequest.ts";
import {showNotify} from "vant";


// 模拟数据，实际中你可以从接口获取，这里定义为响应式数据
const list: Ref<AttentionUser[]> = ref<AttentionUser[]>([]);
const isRefresh = ref(false);
const loading = ref(false);
const finished = ref(false);
const currentPage = ref(1); // 当前页码，从1开始

// 下拉刷新触发的函数

const getFansData = async () => {
  const res = await axiosRequest<AttentionData>({
    url: '/user/followers',
    params: {
      page: currentPage.value,
      per_page: 15
    }
  })
  return res.data.data.results
}
const onRefresh = async () => {
  currentPage.value = 1; // 刷新时将页码重置为1
  finished.value = false; // 重置已加载完所有数据的状态
  try {
    const res = await getFansData()
    list.value = res
    console.log('获取到数据，数据长度为' + res.length)
    if (res.length < 15) {
      finished.value = true;
    } else {
      currentPage.value++; // 成功获取数据后，页码加1
    }
  } catch (error) {
    console.error('刷新数据出错：', error);
  } finally {
    isRefresh.value = false;
  }
};

// 触底加载更多触发的函数
const onLoadMore = async () => {
  if (finished.value || isRefresh.value) return;
  loading.value = true;
  try {
    const res = await getFansData()
    list.value.push(...res)
    console.log('获取到数据，数据长度为' + res.length)
    if (res.length < 15) {
      finished.value = true;
    } else {
      currentPage.value++; // 成功获取数据后，页码加1
    }
  } catch (error) {
    console.error('加载更多数据出错：', error);
  } finally {
    loading.value = false;
  }
};

interface ITarget {
  target: string
}

const attention = async (id: string) => {
  const res = await axiosRequest<string, ITarget>({
    url: '/user/followings',
    method: 'post',
    data: {
      target: id
    }
  })
  console.log('关注成功' + res)
  showNotify({type: 'success', message: '关注成功', position: 'bottom'});
  const index = list.value.findIndex(item => item.id === id)
  list.value[index].mutual_follow = !list.value[index].mutual_follow
}
const cancelAttention = async (id: string) => {
  const res = await axiosRequest<string>({
    url: '/user/followings/' + id,
    method: 'delete'
  })
  console.log('取消关注成功' + res)
  showNotify({type: 'success', message: '取消关注成功', position: 'bottom'});
  const index = list.value.findIndex(item => item.id === id)
  list.value[index].mutual_follow = !list.value[index].mutual_follow
}
</script>

<style scoped>
.attention-cell {
  display: flex;
  align-items: center;
  padding: 16px 10px;
}

.avatar {
  width: 55px;
  aspect-ratio: 1;
  border-radius: 50%;
  margin-right: 10px;
}

.name {
  font-size: 18px;
  font-weight: bold;
}

.fans-count {
  color: #999;
  font-size: 16px;
  margin-top: 5px;
}

.gy {
  width: 70px;
  height: 30px;
  border-radius: 15px;
  padding: 3px;
  font-size: 13px;
  border: none;
  background-color: #dcdcdc;
}

.ungy {
  width: 70px;
  height: 30px;
  border-radius: 15px;
  padding: 3px;
  font-size: 13px;
  border: none;
  background-color: orange;
  color: white;
}
</style>

<!--
<script setup lang="ts">
import {onMounted, ref} from "vue";
import {axiosRequest} from "@/utils/axiosRequest.ts";

const list = ref<AttentionUser[]>([])

onMounted(() => {
  getAttention()
})
const getAttention = async () => {
  const res = await axiosRequest<AttentionData>({
    url: '/user/followers',
    params: {
      page: 1,
      per_page: 10
    }
  })
  list.value = res.data.data.results
}
const attention = async (id: string) => {
  const res = await axiosRequest<string>({
    url: '/user/followings/' + id,
    method: 'delete'
  })
  console.log(res)
  await getAttention()
}
const cancelAttention = async (id: string) => {
  const res = await axiosRequest<string>({
    url: '/user/followings/' + id,
    method: 'delete'
  })
  console.log(res)
  await getAttention()
}
</script>

<template>
  <div>
    <div class="u-body">
      <div class="u-item" v-for="item in list" :key="item.id">
        <div class="u-item-c">
          <img :src="item.photo">
          <span style="display: block;width: 10px;height: 10px"></span>
          <div>
            <span>{{ item.name }}</span>
            <span>粉丝数：{{ item.fans_count }}人</span>
          </div>
          <span style="display: block;width: 10px;height: 10px"></span>
          <button v-if="item.mutual_follow" class="gy" @click="cancelAttention(item.id)">取消关注</button>
          <button v-else class="ungy" @click="attention(item.id)">关注</button>
        </div>

        <span style="display: block;width: 100px;height: 10px"></span>
      </div>

    </div>
  </div>
</template>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: white;
}

.u-body {
  padding: 10px;

}

.u-item {
  width: 100%;
  height: 70px;

}

.u-item-c {
  display: flex;
  width: 100%;
  height: 60px;
  //background-color: pink;
  column-span: 10;
  align-items: center;
}

.u-item > .u-item-c > img {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 25px;
}

.u-item > .u-item-c > div {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  justify-content: space-evenly;
}

.u-item > .u-item-c > .gy {
  width: 70px;
  height: 30px;
  border-radius: 15px;
  padding: 3px;
  font-size: 13px;
  border: none;
  background-color: gray;
}

.u-item > .u-item-c > .ungy {
  width: 70px;
  height: 30px;
  border-radius: 15px;
  padding: 3px;
  font-size: 13px;
  border: none;
  background-color: orange;
  color: white;
}
</style>
-->
